import React from 'react'
import {Redirect,Route} from 'react-router-dom';
import {TabBar} from 'antd-mobile'
import Index from '../Index'
import Found from '../Found';
import My from '../My';
import '../../assets/fonts/iconfont.css'
class Home extends React.Component {
  state = {
    hidden: false
    };
  render() { 
    return ( 
      <div>
       <Route exact path='/home'>
         <Redirect to='/home/index'></Redirect>
       </Route>
       <div style={{ position: 'fixed', height: '100%', width: '100%', bottom: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#21b97a"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="首页"
            icon={<div className='iconfont icon-ind' />
            }
            selectedIcon={<div className='iconfont icon-ind'/>
            }
            selected={this.props.location.pathname === '/home/index'}
            onPress={() => {
              console.log(this.props);
              this.props.history.push('/home/index')
            }}
          >
          <Route path='/home/index' component={Index}></Route>
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div className='iconfont icon-findHouse' />
            }
            selectedIcon={
              <div className='iconfont icon-findHouse' />
            }
            title="找房"
            key="找房"
            selected={this.props.location.pathname === '/home/found'}
            onPress={() => {
              this.props.history.push('/home/found')
            }}
          >
          <Route path='/home/found' component={Found}></Route>
          </TabBar.Item>
          <TabBar.Item
            icon={<i className='iconfont icon-my' />}
            selectedIcon={<i className='iconfont icon-my' />}
            title="我的"
            key="我的"
            selected={this.props.location.pathname === '/home/my'}
            onPress={() => {
              this.props.history.push('/home/my')
            }}
          >
          <Route path='/home/my' component={My}></Route>
          </TabBar.Item>
        </TabBar>
      </div>
      </div>
     );
  }
}
 
export default Home;